<!--  -->
<template>
  <div>
    <div class="list" v-for="(item,index) in playList" @click="listClick(item.id)">
      <div class="left">
        <h2 class="title">{{ item.name }}</h2>
        <div class="pic">
          <div class="img" v-for="j in item.songList">
            <img :src="j.imgUrl" alt="" />
          </div>
        </div>
      </div>
      <div class="right"> 
        <p v-for="(k,index) in item.songList">{{index+1}}. {{k.name}} - {{k.artistName[0]}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OfficialList",
  props: {
    playList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
  },
  mounted() {
    console.log(this.playList);
  },
  methods: {
    listClick(id) {
      this.$router.push("/playlist/detail/"+ id)
    }
  }
};
</script>
<style lang='scss' scoped>
.list {
  display: flex;
  width: 92%;
  height: 100px;
  border-radius: 10px;
  margin: 4%;
  background-color: rgb(230, 132, 132);
  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 25%;
    margin: 10px;
    .title {
      font-size: $font-size-large;
    }
    .pic {
      margin-top: 10px; 
      .img {
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .img:nth-child(1) {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        z-index: 90;
      }
      .img:nth-child(2) {
        position: absolute;
        left: 20px;
        bottom: 0;
        width: 40px;
        height: 40px;
        z-index: 80;
        opacity: 0.5;
      }
      .img:nth-child(3) {
        position: absolute;
        left: 37px;
        bottom: 0;
        width: 30px;
        height: 30px;
        z-index: 70;
        opacity: 0.3;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 65%;
    font-size: $font-size-small;
    margin: 20px 0;
    p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>